<template>
    <pane :title="title" v-if="listCount.length">
        <template slot="content">
            <ul class="module-content bui-box picture-list" ga_event="click_pictures_recommend">
                <li class="bui-left picture-item" v-for="item in listCount">
                    <a :href="item.article_url" target="_blank" class="link">
                        <div class="module-pic picture-img">
                            <img v-lazy="item.cover_image_url" alt="" />
                            <i class="module-tag"><span>{{ item.gallery_image_count }}图</span></i>
                        </div>
                        <p>{{ item.title }}</p>
                    </a>
                </li>
            </ul>
        </template>
    </pane>
</template>

<style lang="less">
    @import "./hotimages.less";
</style>

<script>
  import reqwest from 'reqwest'
  import Pane from '../../pane'

  export default {
    name: 'HotImages',
    data () {
      return {
        list: []
      }
    },
    mounted () {
      reqwest({
        url: this.getHotImagesUrl,
        data: {
          widen: 1
        },
        method: 'get',
        success: (response) => {
          if (response.data) {
            this.list = response.data
          }
        }
      })
    },
    props: {
      count: {
        type: Number,
        default: 4
      },
      title: {
        type: String,
        default: '精彩图片'
      },
      getHotImagesUrl: {
        type: String,
        default: '/api/pc/hot_gallery/'
      }
    },
    computed: {
      listCount: function () {
        return this.list.slice(0, this.count)
      }
    },
    components: {
      Pane
    }
  }
</script>



// WEBPACK FOOTER //
// hotimages.vue?324fe842